<template>
  <div class="m-menu">
    <dl class="nav" @mouseleave="mouseleave">
      <dt>全部分类</dt>
      <dd v-for="(item,index) in $store.state.home.menu" :key="index" @mouseenter="enter">
        <i :class="item.type" />
        {{ item.name }}
        <span v-if="item.type===curHot" class="hot">HOT</span>
        <span class="arrow" />
      </dd>
    </dl>
    <div v-if="curKind" class="detail" @mouseenter="sover" @mouseleave="sout">
      <template v-for="(item, index) in curdetail.child">
        <h4 :key="index">
          {{ item.title }}
        </h4>
        <span v-for="v in item.child" :key="v">{{ v }}</span>
      </template>
    </div>
  </div>
</template>
<script>
export default {
  data () {
    return {
      curKind: '',
      curHot: 'hotel',
      menu: [{
        type: 'food',
        name: '美食',
        child: [{
          title: '美食',
          child: ['代金券', '甜点饮品', '火锅', '自助餐', '小吃快餐']
        }]
      }, {
        type: 'takeout',
        name: '外卖',
        child: [{
          title: '外卖',
          child: ['美团外卖']
        }]
      }, {
        type: 'hotel',
        name: '酒店',
        child: [{
          title: '酒店星级',
          child: ['经济型', '舒适/三星', '高档/四星', '豪华/五星']
        }]
      }, {
        type: 'homestay',
        name: '民宿',
        child: [{
          title: '热门城市',
          child: ['上海', '成都', '北京', '重庆', '南京', '杭州', '广州', '西安', '武汉', '厦门', '长沙', '青岛', '深圳', '天津', '苏州']
        }, {
          title: '热门房源',
          child: ['复式Loft', '别墅']
        }]
      }, {
        type: 'movie',
        name: '猫眼电影'
      }, {
        type: 'airport',
        name: '机票 / 火车票'
      }, {
        type: 'ktv',
        name: '休闲娱乐 / KTV'
      }, {
        type: 'life',
        name: '生活服务'
      }, {
        type: 'hair',
        name: '丽人 / 美发 / 医学美容'
      }, {
        type: 'marry',
        name: '结婚 / 婚纱摄影 / 婚宴'
      }, {
        type: 'offspring',
        name: '亲子 / 儿童乐园 / 幼教'
      }, {
        type: 'sport',
        name: '运动健身 / 健身中心'
      }, {
        type: 'furniture',
        name: '家装 / 建材 / 家具'
      }, {
        type: 'study',
        name: '学习培训 / 音乐培训'
      }, {
        type: 'health',
        name: '医疗健康 / 宠物 / 爱车'
      }, {
        type: 'bar',
        name: '酒吧 / 密室逃脱'
      }]
    }
  },
  computed: {
    curdetail () {
      return this.$store.state.home.menu.filter(item => item.type === this.curKind)[0]
    }
  },
  methods: {
    enter (e) {
      this.curKind = e.target.querySelector('i').className
    },
    mouseleave () {
      this._timer = setTimeout(() => {
        this.curKind = ''
      }, 150)
    },
    sover () {
      clearTimeout(this._timer)
    },
    sout () {
      this.curKind = ''
    }
  }
}
</script>

<style scoped>

</style>
